<template>
  <div>
    <el-col :span="24">

      <el-row>
        <div align="center"><h1>K8S 冒泡部署(map)</h1></div>
      </el-row>

      <el-row>
        <el-col :span="2"><div class="grid-content">&nbsp;</div></el-col>
        <el-col :span="4"><div class="grid-content">
          <h2>1.部署</h2></div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="2"><div class="grid-content">&nbsp;</div></el-col>
        <el-col :span="20"><div class="grid-content">
                             <h4>选择应用节点:</h4></div>
          <el-select v-model="value" style="width:100%" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

        </el-col>
      </el-row>

      <el-row>
        <el-col :span="2"><div class="grid-content">&nbsp;</div></el-col>
        <el-col :span="20"><div class="grid-content">
                             <h4>image地址:</h4></div>
          <el-input v-model="image" placeholder="请输入内容" />
          <br><br>
          <el-button type="success" style="width:20%" icon="el-icon-top" @click="sumbit">提交部署</el-button>
          <br><br>
          <!-- <div class="grid-content" v-html="message2" v-highlight></div> -->

          <!-- <div v-show="play" v-highlight>
      <pre><code v-html="message2">

        </code></pre>
  </div> -->
          <div v-show="play" v-highlight>
            <pre><code class="javascript" v-html="message2" /></pre>
          </div>

        </el-col>
      </el-row>

      <el-row>
        <el-col :span="2"><div class="grid-content">&nbsp;</div></el-col>
        <el-col :span="20"><div class="grid-content">
                             <h2>2.查看</h2></div>
          <el-button-group>
            <el-button type="success" icon="el-icon-check" @click="k8s_dep_logs_vue">查看部署日志(多次点击即刷新)</el-button>
            <el-button type="success" icon="el-icon-date" @click="k8s_show_pods_vue">查看pod信息</el-button>
            <el-button type="success" icon="el-icon-document-copy" @click="k8s_show_describe_vue">查看describe信息</el-button>
            <el-button type="success" icon="el-icon-printer" @click="k8s_show_dep_logs_vue">启动后查看应用日志</el-button>
          </el-button-group>

          <div v-show="play1" v-highlight>
            <pre><code class="javascript" v-html="message1" /></pre>
          </div>

          <!-- <div v-show="play1" v-highlight>
      <pre><code v-html="message1">
        </code></pre>
  </div> -->

        </el-col>
      </el-row>

    </el-col>
  </div>

</template>

<script>
// import  qs from 'qs'
import { k8s_mopo_dep_vue, mopo_pod_list, k8s_dep_logs_vue, k8s_show_pods_vue_mopo, k8s_show_describe_vue_mopo, k8s_show_dep_logs_vue_mopo } from '@/api/query'

export default {
  data() {
    return {
      options: [{
        value: '1',
        label: '数据加载中请稍后'
      }],
      value: '',
      image: '',
      message2: '',
      message1: '',
      play: false,
      play1: false,
      namespace: 'mopo'
    }
  },
  created() {
    this.MopoPodList()
  },
  methods: {
    MopoPodList() {
      mopo_pod_list().then(response => {
        // console.log(response.data)
        this.options = response.data
      })
    },
    sumbit() {
      this.play = true
      k8s_mopo_dep_vue({ 'value': this.value, 'image': this.image }).then(response => {
        console.log(response.data)
        this.message2 = response.data
        // this.value= response.data.podname
      })
    },
    k8s_dep_logs_vue() {
      this.play1 = true
      k8s_dep_logs_vue({ 'aa': this.value }).then(response => {
        // console.log(response.data)
        this.message1 = response.data
      })
    },
    k8s_show_pods_vue() {
      this.play1 = true
      k8s_show_pods_vue_mopo({ 'aa': this.value, 'bb': this.namespace }).then(response => {
        // console.log(response.data)
        this.message1 = response.data
      })
    },
    k8s_show_describe_vue() {
      this.play1 = true
      k8s_show_describe_vue_mopo({ 'aa': this.value, 'bb': this.namespace }).then(response => {
        // console.log(response.data)
        this.message1 = response.data
      })
    },

    k8s_show_dep_logs_vue() {
      this.play1 = true
      k8s_show_dep_logs_vue_mopo({ 'aa': this.value, 'bb': this.namespace }).then(response => {
        // console.log(response.data)
        this.message1 = response.data
      })
    }
  }
}
</script>

<style scoped>
.el-col {
  min-height: 1px
}
</style>
